<template>
	<view class="my-detail" :style="{background: releaseType === 'news' ? '#f5f5f5' : ''}">
	
		<!--  多文字详情内容  多详情图片  上传视频    布局放在详细信息 卡片 底下 -->
		<view class="cardBox" :class="type == 2 ? '' : ''">
			
			<view class="cardBoxs" v-if="detailData.content||
			((detailData.buy_images)&&(detailData.buy_images.length!=0))
			||((detailData.buy_videos)&&(detailData.buy_videos.length!=0))">
				<!-- <span style="color:darkorange ; margin-right: 5px; ">|</span> -->
				{{$t(goods_info)}}
			</view>
			
			
			<!--  多文字详情内容 -->
			<block v-if="detailData.content">
				<view class="detailData_content">
					<rich-text :nodes="content"></rich-text>
				</view>
				<view style="width: 100%;height: 20rpx;"></view>
			</block>

			<!--  多详情图片 -->
			<!-- <block v-if="type==1&&releaseType=='crossborder'"></block> -->
			<!--  跨境货代推广  视频和图片 放顶部了 -->

			<!--<block v-else> -->

			<view v-if="detailData.buy_images&&detailData.buy_images.length!=0"
				v-for="(item,index) in detailData.buy_images" :key="index"
				style="margin-top: 15rpx;padding: 10rpx 20rpx;">
				<image :src="ImageUrl(item)" mode="widthFix" style="width: 100%;" @click="lookat(item)"></image>
			</view>


			<!--  货物的视频 放顶上了  -->
			<block v-if="releaseType=='goods'||releaseType=='crossborder'"></block>
			<!--  货物的视频 放顶上了  -->
			<block v-else>
				<view v-if="detailData.buy_videos&&detailData.buy_videos.length!=0" class="ui-item"
					style="border: 0px;margin-top: 15rpx;padding: 10rpx 20rpx;">
					<view class="ui-video" v-for="(itemFile,indexFile) in detailData.buy_videos" :key="indexFile">
						<video style="width:100%" loop :initial-time="0" :id="'myVideo' + indexFile"
							:enable-play-gesture="true" object-fit="cover" :src="ImageUrl(itemFile)"
							:poster="ImageUrl(itemFile) + '?x-oss-process=video/snapshot,t_1000,f_jpg,w_640,h_360'"></video>
					</view>
				</view>
			</block>
			<!-- 			</block> -->


		</view>

		<!--  上传文件 -->
		<view v-if="detailData.buy_files&&detailData.buy_files.length!=0" class="cardBox"
			:class="type == 2 ? 'yellow' : ''">
			<view style="margin-top: 10rpx;margin-left: 0rpx;font-size: 30rpx;  font-weight: bold;">
				<span style="color:darkorange ; margin-right: 5px;">|</span>
				{{$t(file_info)}}
			</view>
			<view class="buy_files" v-if="detailData.buy_files&&detailData.buy_files.length!=0"
				v-for="(itemFile,index) in detailData.buy_files" :key="index">
				<view style="padding: 5px 10px;" class="downLoad" @click="downLoadFile(itemFile)">
					{{ itemFile.substring(itemFile.length, itemFile.length - 20) }}
				</view>
			</view>
		</view>

		<!--  上传采购清单 -->
		<view v-if="detailData.filelist" class="cardBox" :class="type == 2 ? 'yellow' : ''">
			<view style="margin-top: 10rpx;margin-left: 0rpx;font-size: 30rpx;  font-weight: bold;">
				<span style="color:darkorange ; margin-right: 5px;">|</span>
				{{$t(filelist)}}
			</view>
			<view class="buy_files" v-if="detailData.filelist">
				<view style="padding: 5px 10px;" class="downLoad" @click="downLoadFile(detailData.filelist)">
					{{ detailData.filelist.substring(detailData.filelist.length, detailData.filelist.length - 20) }}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		IMAGE_URL
	} from '@/config/app'
	import {
		ImageUrl,
		isVideo,
		time,
		createC2CConversation
	} from "@/common/public";
	export default {
		props: {
			detailData: {
				type: Object,
				default: {},
			},
			type: {
				type: String | Number,
				default: '1',
			},
			releaseType: {
				type: String | Number,
				default: '',
			}
		},
		computed: {
			content() {
				// 将换行符转换为HTML的换行标签<br/>
				return this.rawContent.replace(/\n/g, '<br/>');
			}
		},
		data() {
			return {
				IMAGE_URL,
				loading: false,
				lang: getApp().globalData.lang,
				goods_info: '详情',
				file_info: '文件',
				filelist: '采购清单',
				rawContent: ''
			}
		},
		mounted() {
			if (this.releaseType == 'transport') {
				if (this.detailData.release_type == 1) {
					this.goods_info = '驾驶证图片'
				}
			}
			if (this.releaseType == 'professional') {
				if (this.type == 1) {
					this.goods_info = '工作内容'
				} else {
					this.goods_info = '工作内容'
				}
			}
			if (this.releaseType == 'lifead') {
				if (this.type == 1) {
					this.goods_info = '广告内容'
				}
			}
			if (this.releaseType == 'exposure') {
				if (this.type == 1) {
					this.goods_info = '曝光内容'
				}
			}

			if (this.lang == 'zh') {
				this.rawContent = this.detailData.content ? this.detailData.content : ''
			} else {
				this.rawContent = this.detailData.content_ru ? this.detailData.content_ru : ''
			}

		},
		methods: {
			ImageUrl,
			isVideo,
			time,
			downLoadFile(url) {
				const that = this
				uni.showLoading({
					title: "download...",
					mask: true
				})
				console.log('下载链接', this.IMAGE_URL + url)
				var downloadTask = uni.downloadFile({
					url: that.IMAGE_URL + url,
					success(res) {
						uni.hideLoading()
						console.log('tempFilePath', res.tempFilePath)
						const tempFilePath = res.tempFilePath
						uni.openDocument({
							filePath: tempFilePath,
							showMenu: true,
							success: function(file) {
								console.log('file-success', file);
							}
						});
					},
				})
				downloadTask.onProgressUpdate(({
					progress,
					totalBytesWritten,
					totalBytesExpectedToWrite
				}) => {
					if (progress === 100) {
						downloadTask.offProgressUpdate();
					}
				})
			},
			lookat(img) {
				uni.previewImage({
					urls: [IMAGE_URL + img],
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cardBoxs {
		margin-top: 10rpx;
		margin-left: 0rpx;
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 8rpx;
		padding: 20rpx 20rpx;
	}

	.buy_files {
		margin-top: 15rpx;
		border-radius: 20rpx;
		background-color: rgb(235, 241, 245);
		color: rgb(94, 157, 237);
	}

	.detailData_content {
		margin-bottom: 20rpx;
		word-break: break-all;
		color: #666;
		padding: 0 20rpx;
		// background-color: rgb(235, 241, 245);
	}

	.my-detail {
		background-color: #ffffff;
		padding-bottom: 160rpx;

		.cardBox {
			width: 90%;
			margin: 0 auto;
			background: #ddd;
			border-radius: 20rpx;
			background: #fff;
			margin-bottom: 20rpx;
			position: relative;

			&.yellow {
				background: #fefcf6;
			}

		}

		.newTitle {
			width: 90%;
			margin: 0 auto;
			font-weight: 600;
			padding-top: 40rpx;

			.icon {
				margin-left: 10rpx;
				transform: rotate(-90deg);
				font-weight: normal;
			}
		}
	}
</style>